<template>
  <div class="swak-loading">
    <div class="-spinner">
      <svg viewBox="25 25 50 50" class="circular">
        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
      </svg><!----></div>
    <div class="-text">
      <slot>数据加载中，请耐心等待！</slot>
    </div>
  </div>
</template>

<script>
  export default {
	name: "swak-loading",
	methods: {}
  };
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @require "../../common/stylus/variable.styl"
  .swak-loading {
    position absolute;
    top: 50%;
    margin-top: -20px;
    width: 100%;
    text-align: center;

    .-spinner {
      text-align: center;
      display inline-block;

      .circular {
        height: 42px;
        width: 42px;
        -webkit-animation: loading-rotate 2s linear infinite;
        animation: loading-rotate 2s linear infinite;
      }

      .path {
        -webkit-animation: loading-dash 1.5s ease-in-out infinite;
        animation: loading-dash 1.5s ease-in-out infinite;
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        stroke-width: 2;
        stroke: #409EFF;
        stroke-linecap: round;
      }
    }

    .-text {
      display inline-block;
      line-height: 42px;
      height: 42px;
      font-size 18px;
      color $color-light-grey;
      padding-left 20px;
      vertical-align top
    }
  }
</style>